<template>
    <div class="container">
        <div id="cesiumContainer"></div>
        <div id="heatmap" v-show="false"></div>
    </div>
</template>
  
<script>
import axios from 'axios';

var handler = null;
var circle_center_entity = null;  // 圆心点 entity
var temporary_circle_entity = null;  // 临时圆形entity
var circle_entity = null; // 结果圆形entity
var circle_end_point = null;  // 结束点
var circle_center_point = null;  // 圆心点

//   var viewer, camera;
window.viewer = null;
window.camera = null;
window.mapPointList = [];

// 设置cesium的token
Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
// window.CESIUM_BASE_URL = "/";
export default {
    name: 'MapContainerSuper',
    data() {
        return {
            dataList: [],
            filterPoint: [],
            lujingdata: [[104.064236, 30.658303],
            [104.064246, 30.65774],
            [104.064268, 30.657265],
            [104.064284, 30.656813],
            [104.0643, 30.656374],
            [104.064804, 30.656416],
            [104.065368, 30.656407],
            [104.065824, 30.656416],
            [104.065813, 30.656988],
            [104.065845, 30.65744]],
            lon: null,
            lat: null,
        };
    },
    mounted() {
        this.init();
        this.$bus.$on('makersShow', this.makersShow);
        this.$bus.$on('hiddenMakers', this.hiddenMakers);
        this.$bus.$on('polyLineShow', this.polyLineShow);
        this.$bus.$on('animationLineShow', this.animationLineShow);
        this.$bus.$on('movePause', this.click_draw_circle);
        this.$bus.$on('heatMapShow', this.heatMapShow);
    },
    methods: {
        init() {
            //创建一个地球模型
            window.viewer = new Cesium.Viewer("cesiumContainer", {
                // geocoder: false, //右上角 搜索
                // homeButton: false, //右上角 Home
                // sceneModePicker: false, //右上角 2D/3D切换
                // baseLayerPicker: false,  //右上角 地形
                // navigationHelpButton: false, //右上角 Help
                // animation: false, // 左下角 圆盘动画控件
                // timeline: false, //时间轴
                // fullscreenButton: false, //右下角 全屏控件
                // vrButton: false, // 如果设置为true，将创建VRButton小部件。
                // scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存
                // infoBox: false, //隐藏点击要素后的提示信息
                terrainProvider: Cesium.createWorldTerrain(),
            });
            var layer = viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
              url: 'https://dev.virtualearth.net',
              mapStyle: Cesium.BingMapsStyle.CANVAS_GRAY,
              culture:"zh-Hans",
              key: "AmatP81xuykwRqbOH8TsyxcyLCH0y09G0-u1IvGnZP3B8296Hgwkhyf-gERLNrFy" //由BingMap官网申请的密钥
            }));

            // 创建地图影像服务（高德二维地图自带路网注记）
            // var vec = new Cesium.UrlTemplateImageryProvider({
            //     url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            //     // url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&version=297",
            //     // url:"http://10.14.216.5:1004/proxy/5375b5af9e1742a1b19e8465a3059671/iserver/services/3D-test1/rest/realspace",
            //     // style:"whitesmoke",
            //     minimumLevel: 3,
            //     maximumLevel: 18
            // });
            //加载地图影像服务
            // let imagery = window.viewer.imageryLayers.addImageryProvider(vec);
            // imagery.hue=3;
            // imagery.contrast=-1.2;

            // //   初始化场景位置（飞入目标位置）
            // window.viewer.scene.camera.flyTo({
            //     // 初始化相机经纬度（这里使用了经纬度转换世界坐标的方法）
            //     destination: new Cesium.Cartesian3.fromDegrees(
            //         // 104.065743,
            //         // 30.65751,
            //         107.502262,
            //         31.209484,  //达州
            //         2000
            //     ),
            //     //设置相机角度
            //     orientation: {
            //         heading: Cesium.Math.toRadians(0.0),  //水平角度
            //         pitch: Cesium.Math.toRadians(-90.0), //垂直角度（从上往下看为-90）
            //         roll: 0,  //翻滚角
            //     },
            //     duration: 5   // 动画持续时间
            // });
            // 设置沙箱允许使用JS
            // var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
            // iframe.setAttribute(
            //     "sandbox",
            //     "allow-same-origin allow-scripts allow-popups allow-forms"
            // );
            // iframe.setAttribute("src", "");
            // // var buildings = window.viewer.scene.primitives.add(new Cesium.createOsmBuildings());
            // window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            //     url: Cesium.IonResource.fromAssetId(96188),
            // }));

            //  Cesium地图 --加载建筑体并设置不同的颜色
            window.viewer.cesiumWidget.creditContainer.style.display = "none";   //取消左下角superMap标识
            //创建DataSource
            // window.datasource = new Cesium.CustomDataSource("enetiestestdata");
            // window.viewer.dataSources.add(window.datasource)
            this.test();
            // this.loadBuilding();

        },
        test1() {
            window.viewer.clock.multiplier = 20; //速度
            window.viewer.clock.shouldAnimate = true;
            var previousTime = window.viewer.clock.currentTime.secondsOfDay;
            const onTickCallback = () => {
                var spinRate = 1;
                var currentTime = window.viewer.clock.currentTime.secondsOfDay;
                var delta = (previousTime - currentTime) / 1000;
                previousTime = currentTime;
                window.viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
            }
            // 开启地图自转效果
            window.viewer.clock.onTick.addEventListener(onTickCallback);
        },
        test() {
            //   初始化场景位置（飞入目标位置）
            window.viewer.scene.camera.flyTo({
                // 初始化相机经纬度（这里使用了经纬度转换世界坐标的方法）
                destination: new Cesium.Cartesian3.fromDegrees(
                    // 104.065743,
                    // 30.65751,
                    // 107.502262,
                    // 31.209484,  //达州
                    121.49272854520109,
                    31.24444484775727,
                    2000
                ),
                //设置相机角度
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),  //水平角度
                    pitch: Cesium.Math.toRadians(-90.0), //垂直角度（从上往下看为-90）
                    roll: 0,  //翻滚角
                },
                duration: 5   // 动画持续时间
            });
        },
        loadBuilding() {
            const tileset = window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: Cesium.IonResource.fromAssetId(96188)
            }))

            window.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(121.49272854520109, 31.24444484775727, 600.5782714174909),
                new Cesium.HeadingPitchRange(Cesium.Math.toRadians(6.2831853071795845), Cesium.Math.toRadians(-0.13274323360597196), 5000))
            tileset.style = new Cesium.Cesium3DTileStyle({
                color: 'color("#565a57",0.8)',
                show: true
            })
        },
        makersShow() {
            // window.viewer.entities.add({
            //     position: Cesium.Cartesian3.fromDegrees(104.065747, 30.657475,10),
            //     billboard: {
            //         image: require("../../../public/static/images/poi.png"), // default: undefined
            //         // show: true, // default
            //         // pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
            //         // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
            //         // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
            //         // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
            //         // scale: 1.0, // default: 1.0
            //         // // color: Cesium.Color.LIME, // default: WHITE
            //         // // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
            //         // alignedAxis: Cesium.Cartesian3.ZERO, // default
            //         // width: 50, // default: undefined
            //         // height: 50, // default: undefined
            //     },
            // });
            this.getList();
        },
        polyLineShow() {
            window.viewer.entities.add({
                // name:entity.name,
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray([104.065747, 30.657475, 104.065725, 30.658334, 104.067442, 30.658361, 104.067388, 30.656423, 104.071015, 30.656506]),
                    width: 5,
                    material: Cesium.Color.DARKORANGE.withAlpha(0.7),
                    // clampToGround: true,  //是否贴地
                    show: true,
                },
            });

            // 在上边添加过的线基础上我们再添加一条动效线
            // window.viewer.entities.add({
            //     // name:entity.name,
            //     polyline: {
            //         positions: Cesium.Cartesian3.fromDegreesArray([
            //             104.065747, 30.657475, 104.065725, 30.658334, 104.067442, 30.658361, 104.067388, 30.656423, 104.071015, 30.656506
            //         ]),
            //         width: 4, // 线的宽度，像素为单位
            //         material: new Cesium.PolylineTrailMaterialProperty({
            //             // 尾迹线材质
            //             color: Cesium.Color.GOLD,
            //             trailLength: 0.4,
            //             period: 3.0,
            //         }),
            //     },
            // });

        },
        getList() {
            if (this.dataList.length == 0) {
                axios({
                    method: "GET",
                    url: "http://192.168.10.125:48080/admin-api/LS/fireWxxfz/list",
                    headers: { Authorization: "Bearer 1ac910b6d2104dfea46ecef9ca444087" }
                }).then(
                    response => {
                        response.data.data.forEach(element => {
                            this.dataList.push([element.gisX, element.gisY, element.id])
                        });
                        console.log(this.dataList);
                        window.mapPointList = [];
                        this.dataList.forEach(element => {
                            window.mapPointList.push(this.createPoint(element));
                        });
                        window.mapPointList.forEach(item => {
                            window.viewer.entities.add(item);
                        })
                    },
                    error => {
                        console.log('错误信息为：', error)
                    }
                )
            } else {
                window.mapPointList.forEach(item => {
                    window.viewer.entities.add(item);
                })
            }

        },
        createPoint(data) {
            return {
                id: data[2],
                position: Cesium.Cartesian3.fromDegrees(data[0], data[1], 15),
                billboard: {
                    image: require("../../../public/static/images/smallfirestation.png"), // default: undefined
                    // show: true, // default
                    // pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
                    // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
                    // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                    // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                    // scale: 1.0, // default: 1.0
                    // // color: Cesium.Color.LIME, // default: WHITE
                    // // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
                    // alignedAxis: Cesium.Cartesian3.ZERO, // default
                    // width: 50, // default: undefined
                    // height: 50, // default: undefined
                }
            }
        },
        animationLineShow() {
            //添加线
            window.datasource.entities.add({
                name: "line",
                polyline: {
                    // positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.lujingdata.flat()),
                    positions: Cesium.Cartesian3.fromDegreesArray(this.lujingdata.flat()),
                    material: Cesium.Color.RED,
                    width: 1
                }
            })

            var property = new Cesium.SampledPositionProperty();
            var starttime = new Date();
            var stoptime;
            var timestamp = starttime.getTime();

            this.lujingdata.forEach((pos, index) => {
                var time = new Date(timestamp + index * 5000);
                stoptime = time;
                var position = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2])
                property.addSample(Cesium.JulianDate.fromDate(time), position);
            })
            property.setInterpolationOptions({
                interpolationDegree: 0.0001,
                interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
            });

            var entitydd = window.datasource.entities.add({
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: Cesium.JulianDate.fromDate(starttime),
                    stop: Cesium.JulianDate.fromDate(new Date(stoptime))
                })]),
                position: property, // 点集
                //朝向
                orientation: new Cesium.VelocityOrientationProperty(property),
                // billboard: {
                //     image: "./yingjiwuzi.png",
                //     scale: 0.5,
                //     pixelOffset: new Cesium.Cartesian2(0, -120),
                //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                //     clampToGround: true  //是否贴地
                // },
                // viewFrom: new Cesium.Cartesian3(30.0, 0.0, 0.0),
                label: {
                    text: "",
                    fillColor: Cesium.Color.RED,
                    pixelOffset: new Cesium.Cartesian2(0, -30)
                },
                model: {
                    uri: './static/images/xiaofangche.gltf',
                    scale: 1,
                    minimumPixelSize: 70,
                    maximumScale: 70
                },
                path: {
                    leadTime: 0,
                    resolution: 1,
                    material: new Cesium.PolylineGlowMaterialProperty({
                        glowPower: 0.1,
                        color: Cesium.Color.GREEN
                    }),
                    width: 10
                }
            });
            window.viewer.clock.onTick.addEventListener((tick) => {
                entitydd.position.getValue(tick.currentTime);
                //  console.log(entitydd.position.getValue(tick.currentTime));
                //转为经纬度
                var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entitydd.position.getValue(tick.currentTime))
                cartographic.longitude = Cesium.Math.toDegrees(cartographic.longitude)
                cartographic.latitude = Cesium.Math.toDegrees(cartographic.latitude)
                // console.log(cartographic);
                // entitydd.label.text = Number(cartographic.longitude).toFixed(4) + "," + Number(cartographic.latitude).toFixed(4);
            })

            window.viewer.trackedEntity = entitydd;
            entitydd.viewFrom = new Cesium.Cartesian3(100, -100, 100); //设置视角跟随的相机位置
            window.viewer.clock.currentTime = Cesium.JulianDate.fromDate(starttime); //修改时间轴的当前时间
            window.viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(stoptime));
            window.viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED,
                window.viewer.clock.shouldAnimate = true; //开始播放
            //viewer.zoomTo(datasource)
        },
        movePause() {
            var centerPoint = Cesium.Cartesian3.fromDegrees(this.lon, this.lat);
            var endPoint = null;
            var distance = null;
            this.filterPoint = this.lujingdata.filter(element => {
                endPoint = Cesium.Cartesian3.fromDegrees(element[0], element[1]);
                distance = Cesium.Cartesian3.distance(centerPoint, endPoint);
                return distance <= 100;
            });
            this.showPoint(this.filterPoint);
            // this.click_draw_circle();
        },
        showPoint(pointList) {
            var pointData = [];
            pointList.forEach(element => {
                pointData.push(this.createPoint(element));
            });
            pointData.forEach(element => {
                window.viewer.entities.add(element);
            });
        },
        hiddenMakers() {
            window.mapPointList.forEach(element => {
                window.viewer.entities.removeById(element.id);
            })
        },
        click_draw_circle() {
            // 再次点击的时候，清除已绘制的中心点，临时圆和结果圆，初始化参数
            if (circle_entity !== null) {
                window.viewer.entities.remove(circle_center_entity);
                window.viewer.entities.remove(temporary_circle_entity);
                window.viewer.entities.remove(circle_entity);
                circle_center_entity = null;
                temporary_circle_entity = null;
                circle_entity = null;
                circle_end_point = null;
                circle_center_point = null;
            }
            // 清除所有点击事件
            if (handler) {
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            }

            handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);

            // 鼠标点击左键
            handler.setInputAction(event => {
                // 屏幕坐标转为世界坐标
                let cartesian = window.viewer.scene.globe.pick(window.viewer.camera.getPickRay(event.position), window.viewer.scene);
                let ellipsoid = window.viewer.scene.globe.ellipsoid;
                let cartographic = ellipsoid.cartesianToCartographic(cartesian);
                this.lon = Cesium.Math.toDegrees(cartographic.longitude);	// 经度
                this.lat = Cesium.Math.toDegrees(cartographic.latitude);	// 纬度

                // 判断圆心是否已经绘制，如果绘制了，再次点击左键的时候，就是绘制最终结果圆形
                if (circle_center_entity) {
                    // 设置最终点
                    circle_end_point = {
                        lon: this.lon,
                        lat: this.lat,
                        height: 0
                    }
                    // 绘制结果多边形
                    this.draw_circle();
                    // 清除事件
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                    // 清除 绘制的中心点和临时圆
                    window.viewer.entities.remove(circle_center_entity);
                    window.viewer.entities.remove(temporary_circle_entity);
                } else {
                    // 设置中心点坐标和结束点坐标
                    circle_end_point = circle_center_point = {
                        lon: this.lon,
                        lat: this.lat,
                        height: 0
                    }
                    // 绘制圆心点
                    this.create_circle_center_point([this.lon, this.lat]);
                    // 开始绘制动态圆形
                    // this.draw_dynamic_circle(circle_center_point);
                    this.draw_circle(circle_center_point);

                    // 鼠标移动--实时绘制圆形
                    // handler.setInputAction((event) => {
                    //     // 屏幕坐标转为世界坐标
                    //     let cartesian = window.viewer.scene.globe.pick(window.viewer.camera.getPickRay(event.endPosition), window.viewer.scene);
                    //     let ellipsoid = window.viewer.scene.globe.ellipsoid;
                    //     let cartographic = ellipsoid.cartesianToCartographic(cartesian);
                    //     let lon = Cesium.Math.toDegrees(cartographic.longitude);  // 经度
                    //     let lat = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度

                    //     if (temporary_circle_entity) {
                    //         // 修改结束点-用于动态绘制圆形
                    //         circle_end_point = {
                    //             lon: lon,
                    //             lat: lat,
                    //             height: 0
                    //         }
                    //     }
                    // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                }

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        },
        // 创建圆心点
        create_circle_center_point(point_arr) {
            circle_center_entity = window.viewer.entities.add({
                // fromDegrees（经度，纬度，高度）以度为单位的经度和纬度值返回Cartesian3位置
                position: Cesium.Cartesian3.fromDegrees(point_arr[0], point_arr[1], 100),
                point: {
                    // 点的大小（像素）
                    pixelSize: 5,
                    // 点位颜色，fromCssColorString 可以直接使用CSS颜色
                    color: Cesium.Color.WHITE,
                    // 边框颜色
                    outlineColor: Cesium.Color.fromCssColorString('#fff'),
                    // 边框宽度(像素)
                    outlineWidth: 2,
                    // 是否显示
                    show: false
                }
            });
        },

        // 绘制动态圆
        draw_dynamic_circle(point) {
            temporary_circle_entity = window.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
                ellipse: {
                    // 半短轴（画圆：半短轴和半长轴一致即可）
                    semiMinorAxis: new Cesium.CallbackProperty(() => {
                        // PolygonHierarchy 定义多边形及其孔的线性环的层次结构（空间坐标数组）
                        return this.two_points_distance(point, circle_end_point);
                    }, false),
                    // 半长轴
                    semiMajorAxis: new Cesium.CallbackProperty(() => {
                        // PolygonHierarchy 定义多边形及其孔的线性环的层次结构（空间坐标数组）
                        return this.two_points_distance(point, circle_end_point);
                    }, false),
                    // 填充色
                    material: Cesium.Color.RED.withAlpha(0.5),
                    // 是否有边框
                    outline: true,
                    // 边框颜色
                    outlineColor: Cesium.Color.WHITE,
                    // 边框宽度
                    outlineWidth: 4
                },
            });
        },

        // 绘制结果圆形
        draw_circle() {
            circle_entity = window.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(circle_center_point.lon, circle_center_point.lat),
                ellipse: {
                    // 半短轴（画圆：半短轴和半长轴一致即可）
                    semiMinorAxis: 100,
                    // 半长轴
                    semiMajorAxis: 100,
                    // 填充色
                    material: Cesium.Color.RED.withAlpha(0.5),
                    // 是否有边框
                    outline: true,
                    // 边框颜色
                    outlineColor: Cesium.Color.WHITE,
                    // 边框宽度
                    outlineWidth: 4
                },
            });
            if (circle_entity) {
                // console.log('中心点坐标：',{lon:this.lon,lat:this.lat});
                this.movePause();
                // this.showPoint(this.filterPoint);
            }
        },

        // 根据经纬度计算两点之前的直线距离
        // two_points_distance(start_point, end_point) {
        //     // 经纬度转换为世界坐标
        //     var start_position = Cesium.Cartesian3.fromDegrees(start_point.lon, start_point.lat, start_point.height);
        //     var end_position = Cesium.Cartesian3.fromDegrees(end_point.lon, end_point.lat, end_point.height);
        //     // 返回两个坐标的距离（单位：米）
        //     return Cesium.Cartesian3.distance(start_position, end_position);
        // },
        heatMapShow() {
            // var coordinate1 = [104.06297, 30.659512, 104.069515, 30.65739];
            this.fun_initViewer();
        },
        fun_initViewer() {
            var len = 300;
            var points = [];
            var max = 100;
            var width = 600;
            var height = 400;

            var latMin = 30.65739;
            var latMax = 30.659512;
            var lonMin = 104.06297;
            var lonMax = 104.069515;

            var dataRaw = [];
            for (let i = 0; i < len; i++) {
                let point = {
                    lat: latMin + Math.random() * (latMax - latMin),
                    lon: lonMin + Math.random() * (lonMax - lonMin),
                    value: Math.floor(Math.random() * 100),
                    // value:20,
                };
                dataRaw.push(point);
            }
            console.log('dataRow：', dataRaw);
            //
            for (let i = 0; i < len; i++) {
                var dataItem = dataRaw[i];
                let point = {
                    x: Math.floor(((dataItem.lat - latMin) / (latMax - latMin)) * width),
                    y: Math.floor(((dataItem.lon - lonMin) / (lonMax - lonMin)) * height),
                    value: Math.floor(dataItem.value),
                };
                max = Math.max(max, dataItem.value);
                points.push(point);
            }

            var heatmapInstance = h337.create({
                container: document.querySelector('#heatmap'),
            });

            var data = {
                max: max,
                data: points,
            };
            heatmapInstance.setData(data);

            // viewer._cesiumWidget._creditContainer.style.display = 'none';
            var canvas = document.getElementsByClassName('heatmap-canvas');
            // console.log(canvas);
            window.viewer.entities.add({
                name: 'heatmap',
                rectangle: {
                    coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
                    material: new Cesium.ImageMaterialProperty({
                        image: canvas[0],
                        transparent: true,
                    }),
                },
            });

            window.viewer.zoomTo(window.viewer.entities);
        },
    },
};
</script>
  
<style scoped>
#heatmap {
    width: 500px;
    height: 500px;
}
</style>
  